<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安装控制中心 - Bibi Setup </title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/global.css" />
    <script src="assets/jquery-3.7.1.min.js" ></script>
    <script src="assets/form.js" ></script>
</head>
<body>
    <div class="main-container">
        <div class="main-box">
            <div class="header">
                <div class="logo">
                    <img src="assets/image/logo.svg"  style="width: 28px; height: 28px;" /> 安装控制中心
                </div>
                <div id="loading">
                    <div class="spinner-border">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="content-box">
                    <div class="app-box">
                        
                    </div>
                
                    <form>
                        
                    </form>
                </div>
                <div class="btn-box">
                    <button class="btn btn-primary" disabled style="width: 80%;" id="main" onclick="save()">安装</button>
                    <button class="btn btn-secondary" style="width: 20%;" id="next" onclick="next()">跳过</button>      
                </div>
           </div>      
        </div>
    </div>

    <script>
    function check(){
        $.ajax({
            url:'work/check-app.php',
            dataType:"json",
            type:'post',
            data:{
                app:'admin'
            },
            success:function(re){

                if (re.status == 'error'){
                    alert(re.message);
                    return;
                }

                $('#main').attr('disabled',false);


                $('.app-box').html(appHtml(re.data));

                let databaseOption = [];
                for(let name  in re.data.database){
                    databaseOption.push({
                        label:re.data.database[name],
                        value:name
                    });
                }

                $('form').append(row('超级管理员',input('username','admin','请输入超级管理员')));
                $('form').append(row('密码',input('password','','请输入密码','password')));
                $('form').append(row('确认密码',input('password2','','请输入确认密码','password')));
                $('form').append(row('数据库',select('database',databaseOption,'default','请选择要安装到的数据库')));
                $('#loading').hide();
            }
        });
    }

    function next(){
        location.href = 'web.html';
    }


    function  save(){

       
        let username  = $('#username').val();
        let password  = $('#password').val();
        let password2 = $('#password2').val();
        //checkfrom 

        if (username=='') return alert('请输入用户名');
        if (password=='') return alert('请输入密码');
        if (password!=password2) return alert('两次密码不一致');
        if (password.length<6) return alert('密码长度不能小于6位');

        let userReg = /^[a-zA-Z]{1}[a-zA-Z0-9_]{3,15}$/;
        if (!userReg.test(username)) return alert('用户名格式不正确');

        $('#loading').show();
        $.ajax({
            url:'work/save-admin.php',
            dataType:"json",
            type:'post',
            data:{
                username:username,
                password:password,
                database:$('#database').val()
            },
            success:function(re){
                if (re.status == 'error'){
                    alert(re.message);
                    return;
                }
                alert('安装成功');
                location.href = 'web.html';
            },
            error:function(){
                alert('安装失败');
            },
            complete:function(){
                $('#loading').hide();
            }
        })
    }

    $(function(){
        check();
    });

    </script>
</body>

<style>
.item{
    display: flex;
    align-items: center;
}

.item .dot{
    width: 30px;
    display: flex;
    align-items: center;
}
</style>
</html>